<template>
  <div>
    <div class="b_table">
      <div style="display: flex; align-items: center; justify-content: space-between; height: 60px">
        <div> </div>
        <div style="position: relative; bottom: 10px">
          <a-button type="primary" @click="handleEdit"> 新增商品 </a-button>
        </div>
      </div>
      <a-table
        style="position: relative; bottom: 5px"
        ellipsis
        :loading="loading"
        bordered
        size="middle"
        class="ant-table-striped"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        :data-source="data.data"
        :columns="columns"
        stripe
        @change="Change"
      >
        <!-- headerCell个性化单元头,表的头 -->
        <template #headerCell="{ column }">
          <!-- 限制只有name才能是蓝色 -->
          <template v-if="column.key === 'goodsName'">
            <span style="color: #1890ff">商品名称</span>
          </template>
        </template>
        <!-- 搜索 -->

        <!-- 个性化单元格，数据 -->
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-switch
              v-model:checked="record.status"
              checked-children="上架"
              un-checked-children="下架"
            />
          </template>

          <template v-if="column.dataIndex === 'image'">
            <div style="width: 80px; height: 80px">
              <img :src="record.image" style="width: 100%; height: 100%; object-fit: contain" />
            </div>
          </template>

          <template v-else-if="column.key === 'caozuo'">
            <div style="display: flex; justify-content: space-around">
              <el-icon @click="DataEdit(record)" color="#0960bd"><Edit /></el-icon>
              <el-icon @click="handleDelete(record)" color="red"><Delete /></el-icon>
            </div>
          </template>
        </template>
      </a-table>
    </div>
    <a-drawer
      title="商品新增和编辑"
      width="40%"
      :open="open"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose"
    >
      <goodsTypeAdd
        @onReturn="onReturn"
        @upload="upload"
        :select_type="select_type"
        :select_title="select_title"
        :select_data="select_data"
        :uploadList="uploadList"
      />
    </a-drawer>
    <a-drawer
      title="文件管理"
      width="90%"
      :open="open_image"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose1"
      ><fileIndex @upload="upload_file"
    /></a-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  // import { adminStore } from '/@/store/locality/admin';
  import { Edit, Delete } from '@element-plus/icons-vue';
  import goodsTypeAdd from './components/goodsTypeAdd.vue';
  import { commoditystore } from './components/goodsList';
  import message from '../../form-design/utils/message';
  import fileIndex from '/@/views/locality/fileManagement/fileIndex.vue';

  {
    goodsTypeAdd;
    fileIndex;
  }
  onMounted(() => {
    getData();
  });
  function upload_file(type, item) {
    if (type == 'image') {
      uploadList.value = item;
      open_image.value = false;
    }
  }
  const open_image = ref(false);
  const select_data = ref('');
  const uploadList = ref([]);
  const select_title: any = ref('新增');
  const select_type: any = ref([]);
  function upload(item) {
    if (item == 'image') {
      open_image.value = true;
    }
  }
  function onReturn(item: any, type: any) {
    if (type == '新增') addgoodsType(item);
    else editgoodsType(item);
  }

  async function addgoodsType(item) {
    const Data = await commoditystore.goodsTypeAdd(item);

    if (Data.code == 200) {
      message.success('提交成功!');
      getData();
      open.value = false;
    } else {
      message.success(Data.message);
    }
  }

  async function editgoodsType(item) {
    const Data = await commoditystore.goodsTypeEdit(item);

    if (Data.code == 200) {
      message.success('提交成功!');
      getData();
      open.value = false;
    } else {
      message.success(Data.message);
    }
  }

  const open = ref<boolean>(false);

  const onClose1 = () => {
    open_image.value = false;
  };

  const onClose = () => {
    open.value = false;
  };
  const DataEdit = (item) => {
    console.log(item);
    select_title.value = '编辑';
    select_data.value = item;
    open.value = true;
  };

  const Change = (pagination: any) => {
    console.log(pagination);
  };

  function handleEdit(record: Recordable) {
    select_title.value = '新增';
    select_data.value = '';
    open.value = true;
  }
  async function handleDelete(item) {
    var Data = {
      id: item.id,
    };
    const d = await commoditystore.goodsTypeDelete(Data);
    getData();

    message.success(d.message);
  }
  const loading = ref(true);

  const data = ref({
    data: [],
    loading: true,
    border: true,
    rolesList: [],
    total: 0,
    pageNum: 1,
    pageSize: 20,
  });

  async function getData() {
    const d = await commoditystore.getgoodsType({
      pageNum: data.value.pageNum,
      pageSize: data.value.pageSize,
    });

    data.value.data = d.data;
    loading.value = false;
    data.value.loading = false;
    data.value.total = d.total;
    d.data.filter((item) => {
      select_type.value.push({
        label: item.categoryName,
        value: item.id,
      });
    });
  }

  // 数据规格
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
    },

    {
      title: '分类名称',
      dataIndex: 'categoryName',
      key: 'categoryName',
      align: 'center',
    },
    {
      title: '图片',
      dataIndex: 'image',
      key: 'image',
      align: 'center',
      width: '100px',
      // record.user_id.toString().toLowerCase().includes(value.toLowerCase()),
    },

    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'user_id',
      key: 'caozuo',
      width: 100,
      fixed: 'right',
      align: 'center',
    },
  ];
</script>
<style scoped>
  [data-doc-theme='light'] .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }

  [data-doc-theme='dark'] .ant-table-striped :deep(.table-striped) td {
    background-color: rgb(29 29 29);
  }

  .highlight {
    padding: 0;
    background-color: rgb(255 192 105);
  }

  .b_table {
    margin: 20px;
    padding: 10px;

    /* margin: 20px; */
    background: white;
  }

  .header {
    width: 97%;
    height: 60px;
    margin: 20px;
    background-color: white;
  }
</style>
